<template>
  <div class="leftSide">
    <div class="title"><span></span> {{ leftSide.meta.name }}</div>
    <el-divider></el-divider>
    <div class="list">
      <router-link
        v-for="(item, index) in leftSide.children"
        :key="index"
        :to="item.path"
      >
        {{ item.meta.name }}
      </router-link>
    </div>
  </div>
</template>
<script>
import router from "@/router";
import _ from "lodash";
export default {
  data() {
    return {
      leftSide: [],
    };
  },
  created() {
    // window.location.hash.split('/')[1]
    this.leftSide = _.filter(
      router.options.routes,
      (v) => v.name == window.location.hash.split("/")[1]
    )[0];
    //   console.log(router.options.routes)
  },
  watch: {
    $route(to, form) {
      this.leftSide = _.filter(to.matched, (v) => v.children.length > 0)[0];
      // console.log(this.$route.path);
    //   console.log(this.leftSide);
    },
  },
};
</script>
<style lang="scss" scoped>
.leftSide {
  flex: 1;
  margin-right: 10px;
  .title {
    font-weight: bold;
    color: #333333;
    display: flex;
    align-items: center;
    margin: 20px 0 0 20px;
    span {
      display: block;
      width: 6px;
      height: 6px;
      background: #2eb0c6;
      border-radius: 2px;
      margin-right: 10px;
    }
  }
  ::v-deep {
    .el-divider {
      margin-bottom: 0;
    }
  }
  .list {
    a {
      display: block;
      height: 50px;
      font-weight: 400;
      line-height: 50px;
      font-size: 14px;
      text-align: center;
      text-decoration: none;
      color: #333333;
      &.router-link-active {
        border-left: 4px solid #2eb0c6;
        background: rgba(46, 176, 198, 0.15);
        color: #2eb0c6;
      }
    }
  }
}
</style>